<template>
	<!-- 我的-会员 -->
	<view class="member">
		<!-- 头部 -->
		<view class="header">
			<view class="title">
				<view class="">
					<uni-icons type="back" size="50rpx" color="white" @click="JumpReturnArrow"></uni-icons>
				</view>
				<view class="">
					<text>月卡会员</text>
				</view>
			</view>
			<view class="header-main">
				<view class="header-main-centent">
					<view class="header-main-title">
						每月领￥{{ 30 }}元会员红包
					</view>
					<view class="periodOfValidity" v-if="form.is_super">
						会员有效期{{ form.level_expire_days }}天
					</view>
					<view class="accumulate">
						积累已省<text>￥{{ form.use_total_money }}元</text>
					</view>
				</view>
			</view>
		</view>
		<view class="empty"></view>
		<view class="privilege">
			<!-- 特权1 -->
			<view class="privilege-one">
				<view class="privilege-title">
					<view class="privilege-title-header">
						<view class="flexjcc">
							<text>特权1</text>
						</view>
						<view class="">
							免费得会员红包
						</view>
					</view>
					<view class="privilege-title-footer">
						<!-- 共<text>6张</text>，可与优惠券叠加使用 -->
						共<text>{{ arr.coupon_num }}张</text>，可与优惠券叠加使用
					</view>
				</view>
				<view class="privilege-one-main flexjcsb">
					<view class="privilege-one-main-left">
						<text>￥</text>
						<text>5</text>无门槛
						<text>×</text>
						<!-- <text>6</text>张 -->
						<text>{{ arr.coupon_num }}</text>张
					</view>
					<view class="privilege-one-main-right">
						会员红包
					</view>
				</view>
			</view>
			<!-- 特权2 -->
			<!-- <view class="privilege-two">
				<view class="privilege-title">
					<view class="privilege-title-header">
						<view class="flexjcc">
							<text>特权2</text>
						</view>
						<view class="">
							会员专享优惠券
						</view>
					</view>
					<view class="privilege-title-footer">
						每张优惠券每天可领1次
					</view>
				</view>
				<view class="privilege-two-main flexjcsb">
					<view class="privilege-two-main-item" v-for="item in list" :key="item.platformcoupon_type_id"
						@click="coupon(item)">
						<view class="main-item-top flexjcc">
							<view class="main-item-top-title">
								<view class="">
									￥<text>{{ item.money }}</text>
								</view>
								<view class="" v-if="item.at_least == 0">
									满{{ item.at_least }}可用
								</view>
							</view>
						</view>
						<view class="main-item-bottom flexjcc">
							限指定商品可用
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<!-- 按钮 -->
		<view class="buttonBox" v-if="!form.is_super">
			<view class="buttonBox-left">
				<view class="LimitedTime flexjcc">
					限时
				</view>
				<view class="pricethemoon">
					<view class="pricethemoon-start">
						<!-- ￥5/月 -->
						￥{{ arr.charge_rule.month }}/月
					</view>
					<!-- <view class="pricethemoon-end">
						￥19/月
					</view> -->
				</view>
			</view>
			<view class="buttonBox-right flexjcc" @click="activateNow">
				立即开通
			</view>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			arr: [],
			list: [],
			form: {
				is_super: false,
				remainingDays: 0,
				use_total_money: 0,
			},
			couponInformation: [],
		}
	},
	onLoad() {
		this.memberInformation()
		this.platformMemberCouponList()
		this.membercardMember_info()
		// this.platformCouponInformation()
	},
	computed: {
		zong() {
			let num = 0
			num += this.couponInformation.money * this.couponInformation.max_fetch
			return 0
		}
	},
	methods: {
		// 会员订单提交
		activateNow() {
			$api.postMemberOrderSubmission({
				level_id: this.arr.level_id,
				period_unit: 'month',
			}).then(res => {
				$api.postPayment({
					out_trade_no: res.data.data.out_trade_no,
					pay_type: 'wechatpay',
				}).then(paymentRes => {
					let obj = paymentRes.data.data.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: obj.timeStamp,
						nonceStr: obj.nonceStr,
						package: obj.package,
						signType: obj.signType,
						paySign: obj.paySign,
						success: (res) => {
							this.membercardMember_info()
						},
						fail: function (err) {
						}
					})
				})
			})
		},
		// 平台优惠券信息
		coupon(item) {
			$api.postPlatformMemberCoupon({
				platformcoupon_type_id: item.platformcoupon_type_id
			}).then(res => {
			})
			// $api.postPlatformCouponInformation({
			// 	platformcoupon_type_id: item.platformcoupon_type_id,
			// }).then(res => {
			// 	this.couponInformation = res.data.data
			// })
		},
		// 平台会员优惠券列表
		platformMemberCouponList() {
			$api.postPlatformMemberCouponList({}).then(res => {
				this.list = res.data.data.list
			})
		},
		// 获取会员卡信息
		memberInformation() {
			$api.postMemberInformation({}).then(res => {
				this.arr = res.data.data
			})
		},
		// 获取会员卡信息
		membercardMember_info() {
			$api.membercardMember_info({}).then(res => {
				this.form = res.data.data
				if (!this.form.is_super) {
					this.form = {
						level_expire_days: 0,
						use_total_money: 0,
					}
				}
			})
		},
		// 返回上一级页面
		JumpReturnArrow() {
			uni.navigateBack()
			// uni.reLaunch({
			// 	url:'../../pages/my/myView'
			// })
		},
	}
}
</script>

<style lang="less" scoped>
.member {
	position: relative;
	background: #F7F7F7;

	.headerTitle {
		position: absolute;
		top: 25rpx;
		// top: 80rpx;
		left: 45rpx;
		z-index: 1111;
		color: red;
	}

	// 头部
	.header {
		position: relative;
		width: 750rpx;
		// height: 506rpx;
		height: 400rpx;
		background: url('../../static/my/InviteMembers/headerBackground.png') no-repeat;
		background-size: 100% 100%;

		.title {
			display: flex;
			align-items: center;
			width: 100%;
			height: 120rpx;
			text-align: center;
			z-index: 2222222222;
			color: white;
			padding-top: 100rpx;

			view:first-child {
				padding: 0 0 0 29rpx;
			}

			view:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;

				text {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					padding-right: 80rpx;
				}
			}
		}

		.header-main {
			position: absolute;
			width: 700rpx;
			height: 334rpx;
			left: 25rpx;
			bottom: -53px;
			background: url('../../static/my/InviteMembers/headerKa.png') no-repeat;
			background-size: 100% 100%;

			.header-main-centent {
				padding-left: 48rpx;

				// 头部
				.header-main-title {
					font-size: 48rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #87422F;
					padding: 49rpx 0 39rpx 0;
				}

				// 有效期
				.periodOfValidity {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #87422F;
					padding-bottom: 54rpx;
				}

				// 累计已省
				.accumulate {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #87422F;

					text {
						font-size: 48rpx;
					}
				}
			}
		}
	}

	// 空
	.empty {
		height: 120rpx;
	}

	// 特权
	.privilege-title {
		.privilege-title-header {
			display: flex;
			align-items: center;

			view:first-child {
				width: 72rpx;
				height: 32rpx;
				background: linear-gradient(270deg, #1B1B1B 0%, #747474 100%);
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(94, 39, 10, 0.1);
				border-radius: 8rpx 2rpx 8rpx 2rpx;

				text {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					background: linear-gradient(130.6838deg, #FFE2D6 0%, #FFC8B1 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			view:last-child {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #252525;
				padding-left: 9rpx;
			}
		}

		.privilege-title-footer {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #252525;

			text {
				color: #E5BF9A;
			}
		}
	}

	.privilege {
		width: 686rpx;
		margin: auto;

		// 特权1
		.privilege-one {
			.privilege-one-main {
				// display: flex;
				width: 686rpx;
				height: 200rpx;
				background: url('../../static/my/InviteMembers/MemberedEnvelope.png') no-repeat;
				background-size: 100% 100%;
				margin-top: 30rpx;

				.privilege-one-main-left {
					width: 500rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;

					text:first-child {
						font-size: 28rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 500;
						color: #FF4444;
					}

					text:nth-child(2) {
						font-size: 64rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF4444;
						padding-right: 11rpx;
					}

					text:nth-child(3) {
						padding: 0 20rpx;
					}

					text:last-child {
						font-size: 40rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FF4444;
					}
				}

				.privilege-one-main-right {
					width: 186rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #87422F;
				}
			}
		}

		// 特权2
		.privilege-two {
			margin-top: 67rpx;

			.privilege-two-main {
				margin-top: 23rpx;
				padding-bottom: 30rpx;

				.privilege-two-main-item {
					width: 232rpx;
					height: 256rpx;
					background: url('../../static/my/InviteMembers/rectangle.png') no-repeat;
					background-size: 100% 100%;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;

					.main-item-top {
						height: 155rpx;
						text-align: center;

						// background-color: aqua;
						.main-item-top-title {
							view:first-child {
								font-size: 28rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FF4444;

								text {
									font-size: 64rpx;
								}
							}
						}
					}

					.main-item-bottom {
						height: 50rpx;
						margin-top: 35rpx;
						// background-color: yellow;
					}
				}
			}
		}
	}

	// 按钮
	.buttonBox {

		display: flex;
		justify-content: space-between;
		width: 686rpx;
		height: 112rpx;
		background: #333333;
		box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 56rpx;
		margin: auto;
		margin-top: 60rpx;

		.buttonBox-left {
			width: 358rpx;
			border-radius: 56rpx 0rpx 0rpx 56rpx;

			// 限时
			.LimitedTime {
				width: 76rpx;
				height: 32rpx;
				background: #FF4444;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(69, 10, 10, 0.2);
				border-radius: 16rpx 16rpx 16rpx 0rpx;
				margin: auto;
				font-size: 22rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #FFFFFF;
			}

			// 5元/月，19/月
			.pricethemoon {
				display: flex;
				justify-content: center;
				align-items: center;
				align-items: baseline;

				.pricethemoon-start {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #F9E3CE;
				}

				.pricethemoon-end {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					padding-left: 32rpx;
				}
			}
		}

		.buttonBox-right {
			width: 328rpx;
			height: 112rpx;
			background: linear-gradient(130.6838deg, #FFE2D6 0%, #FFC8B1 100%);
			border-radius: 0rpx 56rpx 56rpx 0rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
}
</style>